<template>
    <div>
        <el-dialog title="" :visible.sync="dialogVisible" width="800px" :before-close="closeAddDialog"
             :close-on-click-modal="false" :modal="false" :modal-append-to-body="false">

            <div style="font-size: 22px;color: #FFFFFF;margin-bottom: 30px;display: flex;justify-content: space-between;">
                <div>处理记录</div>
                <div>
                    <el-button size="mini" @click="closeAddDialog">取 消</el-button>
                    <el-button size="mini" @click="particulars" style="margin-left: 20px;">详 情</el-button>
                    <el-button size="mini" @click="clickWarnHandle" style="margin-left: 20px;" v-if="alarmInfo.status!='3'">处 理</el-button>
                    <el-button size="mini" type="primary" @click="addSubmit" style="margin-left: 20px;" v-if="alarmInfo.status!='3'">完 结</el-button>
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%" :header-cell-style="tableHeaderStyle">
                <el-table-column align="center" label="序号" type="index" width="80">
                </el-table-column>
                <el-table-column align="center" prop="username" label="处理人" min-width="100">
                </el-table-column>
                <el-table-column align="center" prop="alarmFactor" label="告警类型" min-width="100" show-overflow-tooltip>
                </el-table-column>
                    <el-table-column align="center" prop="feedback" label="反馈内容" min-width="120" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                        <span v-if="row.feedback != 'null'">{{ row.feedback }}</span>
                    </template>
                </el-table-column>
                
                <el-table-column align="center" prop="" label="照片" min-width="120">
                    <template slot-scope="{ row }">
                        <!-- <div style="height: 40px">
                            <el-image v-if="row.pic != 'null' && row.pic != ''" style="width: 40px; height: 40px"
                                :src="row.pic" fit="fill"></el-image>
                            <el-image v-else style="width: 40px; height: 40px" fit="fill"
                                src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"></el-image>
                        </div> -->

                        <el-popover placement="top-start" title="" trigger="hover" v-if="row.pic != 'null' && row.pic != ''">
                        <img :src="row.pic" alt="" style="width: 180px;">
                        <img slot="reference" :src="row.pic" style="width: 25%;">
                        </el-popover>

                        <el-image v-else style="width: 25%;" fit="fill"
                                src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"></el-image>

                    </template>
                </el-table-column>

                <el-table-column align="center" prop="handlingTime" label="处理时间" min-width="140" show-overflow-tooltip>
                </el-table-column>
             
            </el-table>
        </el-dialog>
    </div>
</template>
  
<script>
import { reqClosedLoop, reqAlarmHandleResult } from "@/api/api";
import { mapState } from "vuex";

export default {
    props: ["alarmInfo"],
    data() {
        return {
            tableData: [],
            dialogVisible: false,
        };
    },
    computed: {
        ...mapState(["user","datav"]),
    },
    watch: {
        // alarmInfo: {
        //     handler(val) {
        //         console.log(val);
        //     },
        // },
    },
    methods: {
        // 告警处理记录
        async AlarmHandleResult(id) {
            var res = await reqAlarmHandleResult(id);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            // console.log(res);
            this.tableData = res.data.row;
        },
        tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return `
        background-color: #35437E;
        color: #fff;
        font-size: 14px;
        border: none;
        `
            }
        },
        clickWarnHandle() {
            this.dialogVisible = false;
            this.$emit('clickWarnHandle')
        },

        particulars(){
            this.dialogVisible = false;
            this.$emit('particulars')
        },

        addSubmit() {
            this.$confirm("是否确定完结？完结后不能再次处理！", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    let res = await reqClosedLoop({
                        id:this.alarmInfo.id
                    });
                    // console.log(res);
                    if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
                    this.$modal.notifySuccess("完结成功");
                    this.dialogVisible = false;
                    this.$emit("updateAlarmList2", this.alarmInfo.id);

                    this.datav.end=!this.datav.end
                    this.$store.commit("saveEnd", this.datav.end);//完结后处理中-1
                })
                .catch(() => { });
        },
        closeAddDialog() {
            this.dialogVisible = false;
            this.$parent.clickflag()
        }
    },
    mounted() {
    },
    created() {
    },
};
</script>
  
<style lang="less" scoped>

::v-deep .el-table {
    height: 50vh;
    overflow-y: auto;
    background: #35437E;
}

::v-deep .el-table tr {
    background: #35437E;
}


// 鼠标移入整行变色
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #35437E !important;
}

::v-deep .el-table td.el-table__cell {
    border: none;
}

// 列表照片居中
::v-deep .el-popover__reference-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
  